<template>
  <div class="select-wrapper">
    <el-select v-model="currentValue"  placeholder="请选择" clearable @change="handleChange" :multiple="isMultiple" style="width: 100%" >
      <el-option
          v-for="option in options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
          @change = "$forceUpdate()"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getSelectlist } from "@/api/system/SysPartners";
const emit = defineEmits();
const options = ref([]);
const props = defineProps({
  modelValue: {
    type: [Number, Array], // 可以接受单个数字或者数字数组作为值
    default: null,
  },
  isMultiple: {
    type: Boolean,
    default: false,
  },
  saveType: {
    type: String,
    default: "",
  },
  userId:{
    type: String,
    default: "",
  }
});

const currentValue = ref(props.modelValue);

function handleChange(value) {
  if (Array.isArray(value)) {
    currentValue.value = value;
    value = value.join(',');
  } else {
    currentValue.value = value;
  }
  emit('update:modelValue', value);
}

onMounted(() => {
  getList();
});

function getList() {
  getSelectlist({saveType:props.saveType,userId:props.userId}).then(response => {
    options.value = response.data.map(item => ({
      value: item.value,
      label: item.label,
    }));
  });
}
</script>

<style scoped>
.select-wrapper {
  width: 300px;
}
</style>
